<template>
	<view class="jsfun-picker" >
		<slot></slot>
		<!-- 遮罩层 -->
		<view class="mask" @tap.stop="closePicker" catchtouchmove="true" v-if="isShow"
			:style="{height: scollHeight+'px'}"></view>
		<!-- 多选控件 -->
		<view class="picker" :class="{'pickerShow':isShow}" catchtouchmove="true"  :style="{height: plfhs+'rpx'}">
			<!-- 标题 -->
			<view class="title">
				<text class="ok" @click="clearOrder">清空列表</text>
				<text class="biaoti">订单列表</text>
				<view class="cancel" @tap.stop="closePicker"
					style="position: relative;z-index: 3;padding:0 10rpx 0 62rpx;">
					<image src="../../static/pages/guanbi.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>

			<!-- 数据列表 -->


			<view style="text-align: left;" class="list" v-if="listArr.length>0">

				<view class="all_order">
					合计: <text style="margin-left: 16rpx;font-size: 28rpx;font-weight: 400;
color: #2C2C2D;">{{listArr.length}}单</text>
				</view>
				<scroll-view scroll-y="true" style="height: 1040rpx;">
					<view class="ddlb" v-for="(item,index) in listArr" :key="index" :class="{'active':item.select}">

						<view class="qcfd" v-if="item.orderType==2">
							<view class="fl  gnm">
								收货人: {{item.deliveryUser}}
							</view>
							<!-- <view class="fl">
								收货人: {{item.deliveryUser}}
							</view> -->
							<view class="fl  gnm">
								{{item.deliveryTel}}
							</view>
						</view>
						<view v-if="item.orderType==2" class="" style="margin:16rpx 0;text-align: left;">
							{{item.deliveryProvince}}{{item.deliveryCity}}{{item.deliveryArea}}{{item.deliveryAddress}}
						</view>

						<view class=""  v-if="item.orderType==1">
							<view class="">
								<view class="qcfd">
									<view class="fl"
										style="width: 12rpx;height: 12rpx;border-radius: 16rpx;background-color: #2577FF;margin-top: 16rpx;margin-right:8rpx ;">
									</view>
									<view class="fl gnm" >{{item.pickNmae==null?'--':item.pickNmae}} {{item.pickPhone==null?'--':item.pickPhone}}</view>
									
									
								</view>
								<view class="" style="margin-left: 20rpx;">
									{{item.picksAddress}}
								</view>
							</view>
							<view class=""   style="margin-top: 20rpx;">
								<view class="qcfd"   >
									<view class="fl"
										style="width: 12rpx;height: 12rpx;border-radius: 16rpx;background-color: #FF690D;margin-top: 16rpx;margin-right:8rpx ;">
									</view>
									
									<view class="fl gnm"  >{{item.deliveryUser==null?'--':item.deliveryUser}} {{item.deliveryTel==null?'--':item.deliveryTel}}</view>
								</view>
								
								<view class="" style="margin-left: 20rpx;">
									
									{{item.deliveryAddress}}
								</view>
							</view>
						</view>
						<view v-if="item.goodsName" class="" style="color: #7b7b7b;font-size: 28rpx;margin-top: 10rpx;">
							货物名称: {{item.goodsName}}
						</view>
						<view class="uni-form-item uni-column qcfd">
							<view class="pay_type fl" style="margin-top: -14rpx;margin-left: -30rpx;">
								<uni-group>
									<!-- <view class="text">选中：{{formData.value}}</view> -->
									<uni-data-checkbox @fsj='jssj($event,item)' selectedColor="#FF690D"
										v-model="item.payer-1" :localdata="sex"></uni-data-checkbox>
								</uni-group>
							</view>
							<view class="goods_num fr">
								<text class="jians">件数</text>
								<uni-number-box @changes="mychanges($event,item)" :value="item.qty" />
							</view>

						</view>
						<view class="line">
						</view>
						<view class="qcfd" style="display: flex; align-items: center; justify-content: flex-end;padding:14rpx 0;">
							<image style="width: 30rpx;height: 30rpx;"src="/static/pages/delete.png" mode=""></image>
							<view @click="deleteOrder(item)" class="fr" style="font-size: 24rpx;">
								删除
							</view>
						</view>
					</view>
					<view class="" style="height: 220rpx;opacity: 0;">
						1312
					</view>
				</scroll-view>
			</view>

			<text style="justify-content: center;font-size: 36rpx;padding: 40rpx;" class="list" v-else>
				没有订单，请下单
			</text>
			<!-- 底部说明 -->
			<view class="mess" v-if="mess">

			</view>
		</view>


	</view>
</template>

<script>
	import uniDataChecklist from '../uni-data-checkbox/uni-data-checkbox.vue'
	import uniGroup from '../uni-group/uni-group.vue'
	export default {
		name: 'jsfun-picker',
		props: {
			mess: String, //备注说明
			listArr: { //数据
				type: Array,
				default: ''
			},
			defaultArr: { //默认选中的内容
				type: String,
				default: ''
			},
			type: { //多选 单选  multiple single 
				type: String,
				default: 'single'
			},
			isShow:{
				type: Boolean,
				default: false
			},
			plfhh:{
				type: Number,
				default: 0
			},
			// disabled: { //是否为禁用状态
			// 	type: [String, Boolean],
			// 	defalut: false
			// },
		},
		data() {
			return {
				listArrNew: {}, //记录选中的内容
				payer: '',
				qtys: '',
				id: '',
				scollHeight: 0,
				listArrs: this.listArr,
				formData: {
					value: 2,
					hobby: [1]
				},
				sex: [{
					text: '寄付',
					value: 0
				}, {
					text: '到付',
					value: 1
				}],
				plfhs:1250
			}

		},
		watch: {
			//这里需要监听默认值的改变，重新初始化
			defaultArr(val) {

				this.initValue();
			},
			
			isShow(newval,oldval){
				console.log('this.plfhs',this.listArr)
				if(this.listArr.length>0){
					this.orderType=this.listArr[0].orderType
				}
			}
			
		},
		components: {
			uniDataChecklist,
			uniGroup
		},
		onShow() {
			this.initValue();
			console.log('this.plfhs',this.listArr)
		},
		mounted() {
			this.plfhs=this.plfhs+this.plfhh
			
			let _that = this
			uni.getSystemInfo({
				success: function(res) {
					_that.scollHeight = res.windowHeight
					console.log('---', _that.scollHeight)
				}
			})
		},
		methods: {
			async jssj(data, item) {

				let serial = item.serial
				let res = await this.$request.post(this.$requestUrl.XGORDER_URL, {
					data: {
						serial: item.serial,
						payer: Number(data) + 1,
						orderType:this.orderType
					}
				});


			},
			clearOrder() {
				this.$emit('clear')

			},

			mychanges(data, item) {
				if (data == 0) {
					item.qty=1
					return this.$api.msg('寄件数量不能为0')
					
				}

				this.$emit('delete', data, item)
			},

			deleteOrder(item) {

				this.$emit('deleteOrder', item)
				// let res = await this.$request.post(this.$requestUrl.DELE_ORDER_URL, {
				// 	data: {
				// 		serial: item.serial,
				// 		status: 0
				// 	}
				// });




			},

			async radiosChange(evt, item) {


			},
			// showPicker() {
			// 	console.log(this.isShow)
			// 	if(this.isShow==true ){
			// 		this.isShow = !this.isShow;
			// 	}else{
			// 		this.isShow = !this.isShow;
			// 	}
			// },
			//关闭
			closePicker() {
				// this.isShow = false;
				this.$emit('gb')
				//点遮罩 点取消关闭说明用户不想修改，所以这里对数据进行初始化
				this.initValue();
			},
			//组件数据初始化  进入时、关闭时调用初始化
			initValue() {
				//默认值
				let defaultArr = this.defaultArr.split(",");

				//将传进来的数组转成对象使用	
				var temp = {}
				for (let item in this.listArr) {
					let defalutSelect = false;
					if (defaultArr.length > 0 && defaultArr.indexOf(this.listArr[item]) != -1) defalutSelect = true;
					temp[item] = {
						index: item,
						name: this.listArr[item],
						select: defalutSelect
					}
				}
				this.listArrNew = temp;
			},
			//选中元素

			//点击确定
			okClick() {
				var data = {},
					list = {},
					textStr = "",
					indexStr = "";
				for (let item in this.listArrNew) {
					var obj = this.listArrNew[item];
					if (obj.select) {
						list[obj.index] = obj.name
						indexStr += (indexStr == "" ? "" : ",") + obj.index
						textStr += (textStr == "" ? "" : ",") + obj.name
					}
				}
				data['list'] = list
				data['indexStr'] = indexStr
				data['textStr'] = textStr

				this.$emit('click', data)
				//确定后更新默认初始值,这样再次进入默认初值就是最后选择的
				this.defaultArr = textStr;
				//关闭
				this.closePicker();
			}
		}
	}
</script>

<style lang="scss">
	.jsfun-picker {
		position: relative;
		padding: 0 24rpx;

		.mask {
			position: fixed;
			z-index: 1;
			right: 0;
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);


		}

		.picker {
			border-radius: 16rpx 16rpx 0 0;
			transition: all .3s ease;
			

			&.pickerShow {
				bottom: 0;
			}

			position: fixed;
			z-index: 2;
			right: 0;
			left: 0;
			bottom: -100%;
			background: #fff;
			color:#666;

			.title {
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx #efefef;
				padding: 18rpx 24rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				font-weight: bold;

				//确定按钮颜色
				.ok {
					font-size: 28rpx;
					font-weight: 400;
					color: #7B7B7B;
				}
			}

			.list {
				background-color: #F4F3F3;
				padding: 0rpx 24rpx;
				display: flex;
				flex-flow: wrap;

				//列表元素样式
				.ddlb {
					background: #FFFFFF;
					padding: 24rpx 20rpx 0;
					color: #2C2C2D;
					margin-bottom: 16rpx;
					border-radius: 8px;
				}



				//列表元素选中的样式
				.active {
					background: blue;
					color: #fff;
				}
			}

			.mess {
				padding: 0rpx 20rpx;
				margin-bottom: 20rpx;
				text-align: left;
			}
		}

	}

	.line {
		margin: 14rpx 0 0;
		width: 654rpx;
		height: 2rpx;
		border: 1rpx solid #E9E9E9;
		box-sizing: border-box;
		background-color: #E9E9E9;
		opacity: 0.4;
	}

	.uni-form-item {
		margin-top: 24rpx;
	}

	.pay_type {
		display: flex;
	}

	.pay_type label {
		margin-right: 24rpx;
		font-size: 24rpx;
	}

	.pay_type label radio {
		transform: scale(0.8)
	}

	.goods_num {
		display: flex;
		margin-top: 6rpx;
		text-align: center;
	}

	.goods_num .jians {
		line-height: 48rpx;
		font-size: 26rpx;
		color: #7B7B7B;
		margin-right: 26rpx;
	}

	.biaoti {
		font-size: 32rpx;
		font-weight: 400;
		color: #2C2C2D;
	}

	.all_order {
		margin: 24rpx 0;
		font-size: 28rpx;
		font-weight: 400;
		color: #2C2C2D !important;
	}

	.gnm {
		font-size: 32rpx;
		font-weight: bold;
		
		color: #2C2C2D;
	}
</style>
